<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>首页</title>

    <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>

    <!-- layui 公用样式 -->
    <link href="static/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="static/layui/font/font-awesome.min.css" rel="stylesheet">
    <link href="static/layui/css/style.css" rel="stylesheet">
    <script src="static/layui/layui.js"></script>

    <script src="static/jquery/jquery.js"></script>

    <script src="static/js/myapi.js"></script>
</head>
<body>

<div class="background" id="app">
    <div class="background-top">
        <form class="layui-form" lay-filter="example" method="post">
            <h4>影像智能诊断报告数据平台</h4>
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-username"></i>
                <input autocomplete="off" class="layui-input" lay-verify="username" name="username"
                       placeholder="请输入账号" type="text"/>
            </div>
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-key"></i>
                <input autocomplete="off" class="layui-input" lay-verify="password" name="password"
                       placeholder="请输入密码" type="password"/>
            </div>
            <div class="layui-form-item">
                <!-- lay-submit 用于指定点击按钮后提交表单 -->
                <button class="layui-btn" lay-filter="user" lay-submit="" type="button">登录</button>
            </div>
        </form>
    </div>
</div>

<script>
    function getContextPath() {
        let pathName = document.location.pathname
        let index = pathName.substr(1).indexOf("/")
        let result = pathName.substr(0, index + 1)
        return result
    }

    let ctx = getContextPath()
    localStorage.setItem('ctx', ctx)

    layui.use(['form', 'layer'], function () {
        let form = layui.form
        let layer = layui.layer

        form.verify({
            username: function (value) {
                if (value.length < 2) {
                    return '您输入的用户名长度过小'
                }
            },
            password: [
                /^[\S]{6,18}$/, '密码长度在 6 ~ 18 之间'
            ],
        })

        // 提交表单后执行
        form.on('submit(user)', function (data) {
            data = data.field
            const formData = new FormData()
            formData.append('username', data.username)
            formData.append('password', data.password)
            myapi.login(formData, layer)
            // 这里要返回 false 阻止页面跳转
            return false
        })
    })
</script>

</body>
</html>
